<template>
  <div class="uploadContainer">
    <div class="cropper" id="copperBox">
      <vueCropper
        ref="cropper2"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="option.fixedBox"
      ></vueCropper>
    </div>
    <div class="footer-btn">
      <div class="scope-btn">
        <label class="btn" for="uploads" style="background: dodgerblue;">选择图片</label>
        <input
          type="file"
          id="uploads"
          style="position:absolute; clip:rect(0 0 0 0);"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
        />
        <p class="btn" style="padding:0;color:#fff;margin-bottom:30px;" @click="changeScale(1)">+</p>
        <p class="btn" style="padding:0;color:#fff;margin-bottom:30px;" @click="changeScale(-1)">-</p>
        <p class="btn" style="padding:0;color:#fff;margin-bottom:30px;" @click="rotateLeft">↺</p>
        <p class="btn" style="padding:0;color:#fff;margin-bottom:30px;" @click="rotateRight">↻</p>
      </div>
      <div class="upload-btn">
        <p class="btn" style="padding:0;color:#fff;" @click="startUpload()">确定</p>
        <p class="btn" style="padding:0;opacity: 0.5;color:#fff;" @click="cancelUpload">取消</p>
      </div>
    </div>
  </div>
</template>
<script>
import config from "../../config.js";
import VueCropper from "vue-cropper";
export default {
  data() {
    return {
      crap: false,
      flag:false,
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 160,
        autoCropHeight: 100,
        fixedBox: true,
        downImg: "#",
      },
    };
  },
  mounted() {
    this.getSign();
  },
  methods: {
    getSign() {
      let url =
        config.baseUrl +
        "special/v1.0/special/downloadautograph?userId=" +
        localStorage.userid;
      this.$axios.get(url).then(res => {
        if (res.data.meta.success) {
          if (res.data.data.photoUrl) {
            this.option.img = res.data.data.photoUrl;
            this.flag=true
          }
        }else{
            this.flag=false
        }
      });
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper2.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper2.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper2.rotateRight();
    },
    finish(type) {
      // 输出
      var test = window.open("about:blank");
      test.document.body.innerHTML = "图片生成中..";
      if (type === "blob") {
        this.$refs.cropper2.getCropBlob(data => {
          var img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
        });
      } else {
        this.$refs.cropper2.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    cancelUpload() {
      this.$router.go(-1);
    },
    startUpload() {
      this.$emit('success2', true);
      this.$refs.cropper2.getCropBlob(data => {
        let uploadFile = document.getElementById("uploads").files[0];
        let formFile = new FormData();
        formFile.append("file", uploadFile);
        var url =
          config.baseUrl +
          "special/v1.0/special/uploadautograph?userId=" +
          localStorage.userid;
        this.$axios
          .post(url, formFile, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
           this.$emit('success2', false);
            if (res.data.meta.success) {
              this.$message.success("上传成功");
              this.option.img = "";
              this.$router.go(-1);
            } else {
              this.$message.warning(res.data.meta.message);
            }
          })
          .catch(response => {
            console.log(response);
          });
      });

    },
    uploadImg(e, num) {
      this.option.img;
      var file = e.target.files[0];

      this.test = file;

      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          this.option.img = data;
        } else if (num === 2) {
          this.example2.img = data;
        }
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>
<style type="text/less">
.uploadContainer {
  height: 400px;
  width: 100%;
}
.btn {
  width: 80px;
  line-height: 30px;
  border-radius: 2px;
  float: left;
  padding: 0;
  background: #2db0fd;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}
.btn:hover {
  cursor: pointer;
}
.scope-btn {
  width: 450px;
  margin: 30px auto;
}
.upload-btn {
  width: 200px;
  margin: 0 auto;
}
#copperBox {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: #000;
  position: relative;
  overflow: hidden;
}
</style>
